import React, { useContext } from "react";
import { View, StyleSheet, Dimensions, Text, TouchableOpacity, Image } from "react-native";
import { Overlay } from "@rneui/themed";
import LinearGradinet from 'react-native-linear-gradient';
import CommonContext from '@/utils/createContext'
import AddWalletImg from '@/assets/safe/add_wallet.png'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SafeReader = () => {

    const { modalVisible, handleColse } = useContext(CommonContext)

    return (
        <Overlay
            animationType="slide"
            transparent={true}
            isVisible={modalVisible}
            onRequestClose={handleColse}
            overlayStyle={{ width: 330 * ratio, height: 378 * ratio, borderRadius: 5 }}
        >
            <View style={styles.centeredView}>
                <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 67 * ratio }}>
                    <Image source={AddWalletImg} style={styles.img} />
                </View>
                <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 25 * ratio }}>
                    <Text style={{ ...styles.title1, color: '#2C2C2C', textAlign: 'center' }}>
                        your safe is ready!
                    </Text>
                </View>
                <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 5 * ratio }}>
                    <Text style={{ ...styles.title2, color: '#2C2C2C', width: 267 * ratio, textAlign: 'center' }}>
                        That is it! Start using your most secure
                        wallet on Ethereum
                    </Text>
                </View>
                <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 40 * ratio }}>
                    <TouchableOpacity onPress={handleColse}>
                        <LinearGradinet colors={['#0EBBF8', '#0069F6']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.button}>
                            <Text style={{ ...styles.title1, color: '#FFFFFF', textAlign: 'center' }}>Start using Safe</Text>
                        </LinearGradinet>
                    </TouchableOpacity>
                </View>
            </View>
        </Overlay>
    )
}

const styles = StyleSheet.create({
    centeredView: {
        justifyContent: "center",
        alignItems: "center"
    },
    img: {
        width: 133 * ratio,
        height: 79 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        lineHeight: 24
    },
    title2: {
        fontSize: 15,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontWeight: '400',
        lineHeight: 19
    },
    button: {
        width: 320 * ratio,
        height: 50,
        borderRadius: 28,
        justifyContent: 'center'
    }
})
export default SafeReader